<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		readDetailsApi
	} from '/api/request.js';
	const props = defineProps({});
	const platform = ref({});
	const query = ref({
		id: '',
		page: 1,
		la: true,
		trigger: false,
		total: 1,
		title: ''
	});
	onLoad((e) => {
		query.value.title = e.title
		query.value.id = e.id
	});
	const list = ref(null);

	// 获取内容列表
	const fetchList = async (type = true) => {
		try {
			uni.showLoading({
				mask: true
			});
			let res = await readDetailsApi(query.value);
			console.log(res);
			query.value.content = res.data.content
				.replace(/<p>/g, '<view>')
				.replace(/<\/p>/g, '</view>')
			console.log(query.value.content);
			// 	.replace(/<span[^>]*style="([^"]*)"[^>]*>/g, (match, style) => {
			// 		const newStyle = style ? `${style}; display: block; line-height: 30px; font-size: 20px;` :
			// 			'display: block; line-height: 30px; font-size: 20px;';
			// 		return `<text style="${newStyle}">`; // Return <text> with styles
			// 	})
			// 	.replace(/<\/span>/g, '</text>') // Directly replace </spa
			// console.log(query.value.content);


		} catch (error) {
			console.log(error);
		}
	};

	// 页面显示时加载数据
	onShow(async () => {
		if (!list.value || list.value.length < 1) {
			fetchList(false).finally(() => {
				uni.hideLoading()
			});
		}
		platform.value = uni.getStorageSync('platform');
	});

	// 返回上一页
	const goback = () => {
		uni.navigateBack();
	};
</script>

<template>
	<view class="wrap" :style="{ height: platform.gaodu + 'rpx' }">
		<view class="header-wrap uni-row"
			:style="{ paddingTop: platform.dingbu + 'rpx', height: platform.dingbu + 96 + 'rpx' }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title">{{ query.title }}</view>
			<image style="opacity: 0" class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
		</view>
		<scroll-view scroll-y="true" class="body" :style="{ height: platform.gaodu - platform.dingbu - 96 + 'rpx' }">
			<view class="neirong">
				<rich-text selectable="true" :nodes="query.content"></rich-text>


				<text selectable="true">这是一段可选取复制的文字</text>

			</view>
		</scroll-view>
	</view>
</template>

<style scoped>
	.word {
		cursor: pointer;
		transition: color 0.3s ease;
		/* 添加过渡效果 */
	}
</style>


<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.body {
			padding: 0 28rpx 40rpx;

			.neirong {
				padding: 10rpx 28rpx 30rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
			}

			.content {}
		}
	}
</style>